<template>
	<view class="goods-list">
		<view class="goods-item" v-for="(item,index) in list" :key="item.goods_id" @click="goDetail(item)">
			<image :src="item.goods_big_logo" mode="" class="img"></image>
			<view class="item-right">
				<view class="title">
					{{item.goods_name}}
				</view>
				<view class="price">
					￥{{item.goods_price}}
				</view>
				
			</view>
		</view>
		<view class="top" v-if="isShowTop" @click="goTop">
			↑
		</view>
	</view>
</template>

<script>
	import {getGoodsList} from '@/utils/api.js'
	export default {
		data() {
			return {
				queryInfo:{
					query:'',//关键字
					cid:'',//商品的分类id
					pagenum:1,//当前页
					pagesize:10,//每页放10条
				},
				list:[],//存放数据
				total:0,//总条数
				isLoading:false,//标记你的请求是否正在加载中 false 不在加载中
				isShowTop:false,
			};
		},
		onLoad(options) {
			console.log(options);
			this.queryInfo.query = options.query || ''
			this.queryInfo.cid = options.id || ''
			this.getList()
			
			
			
		},
		methods:{
			// 获取列表的方法
			// type是形参  就是用来接受 下拉的回调函数
			 getList(type){
				// 发送请求
				this.isLoading = true
				getGoodsList(this.queryInfo).then(res=>{
					if(type){
						type()
						this.list = res.data
					}else{
						// 加载下一页的时候   拼接数据 上一页和当前页做拼接
						this.list = [...this.list,...res.goods]
						
					}
				   this.total = res.total
					// 请求完成  把isLoading  设为false
					this.isLoading = false
				})
			// let res1 = await getGoodsList(this.queryInfo)
			// console.log(res1);
				
			},
			// 点击返回顶部
			goTop(){
				uni.pageScrollTo({
					scrollTop:0,
					duration:500
				})
			},
			// 跳转详情
			goDetail(item){
				uni.navigateTo({
					url:'./detail?id='+item.goods_id
				})
				
			}
		},
		// 上拉加载下一页 上拉触底   
		onReachBottom() {
			// this.total是返回的总数据 this.list 是目前请求到的数据
			if(this.total>this.list.length){
				if(!this.isLoading){
					this.queryInfo.pagenum++
					// 重新调用getList
					this.getList()
				}
			}else{
				// 提示没有更多数据了
				uni.showToast({
					title:"没有更多数据了...",
					duration:500
				})
			}
			
			
		},
		// 下拉更新  
		onPullDownRefresh() {
			console.log('下拉触发了');
			// 重置第一页
			this.queryInfo.pagenum = 1
			this.getList(()=>{
				uni.stopPullDownRefresh()
			})
			
		},
		// 监听页面的滚动
		onPageScroll(e) {
			console.log(e);//e.scrollTop 页面滚动条的高度
			if(e.scrollTop>300){
				this.isShowTop = true
			}else{
				this.isShowTop = false
			}
			
			
		}
		
		
		
	}
</script>
<style lang="scss">
	.goods-item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 20rpx;
		.img{
			width: 250rpx;
			height: 160rpx;
		}
		.item-right{
			flex:1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 200rpx;
			.title{
				font-size: 24rpx;
			}
			.price{
				color:#c00;
			}
		}
	}
	.top{
		position: fixed;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background: skyblue;
		color: #fff;
		text-align: center;
		line-height: 80rpx;
		right: 50rpx;
		bottom: 100rpx;
	}
</style>